<template>
  <div class="main">
    <div class="form-container">
      <div class="form-main">
        <!-- <h2 style="background:#265eff;">疫情上报系统</h2>
                <p class="warn-content">为严防疫情扩散，进一步做好新型冠状病毒的肺炎疫情防控工作，请如实填写以下信息!</p> -->
        <div class="name" v-if="fromConfigParam[0].whetherShow">
          <span class="required" style="color:red">*</span>
          <label for="name">姓名</label><br />

          <input
            class="form-border"
            id="name"
            type="text"
            name="username"
            maxlength="20"
            placeholder="姓名"
            required="required"
            v-model="nameModel"
          />
          <br />
        </div>
        <div class="phoneNum" v-if="fromConfigParam[15].whetherShow">
          <span class="required" style="color:red">*</span>
          <label for="phone">联系电话</label><br />
          <input
            class="form-border"
            id="phone"
            type="text"
            name="phoneNum"
            maxlength="12"
            placeholder="请填写联系电话"
            v-model="phoneModel"
          /><br />
        </div>
        <div class="residence" v-if="fromConfigParam[7].whetherShow">
          <span class="required" style="color:red">*</span>
          <label for="name">所住区域</label><br />
          <input
            class="form-border"
            id="residence"
            type="text"
            @click="showSelectPopup = true"
            name="residence"
            placeholder="请填写所住区域"
            v-model="residence"
            readonly="true"
          />
          <br />
        </div>
        <div class="yy-c currentProvince">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="name">您所在的小区</label>
          <input
            class="form-border"
            id="currentProvince"
            maxlength="32"
            type="text"
            name="currentProvince"
            placeholder="小区"
            v-model="community"
          />
          <br />
        </div>
        <div class="yy-city-distance">
          <div class="yy-c currentCity">
            <!-- <span class="required" style="color:red">*</span>  -->
            <label for="name">楼号</label>
            <input
              class="form-border"
              id="currentCity"
              maxlength="10"
              type="text"
              name="currentCity"
              placeholder="楼号"
              v-model="building"
            />
            <br />
          </div>
          <div class="yy-c yy-ccurrentCounty">
            <!-- <span class="required" style="color:red">*</span>  -->
            <label for="name">单元</label>
            <input
              class="form-border"
              id="currentCounty"
              maxlength="10"
              type="text"
              name="currentCounty"
              placeholder="单元"
              v-model="unit"
            />
            <br />
          </div>
          <div class="yy-c yy-ccurrentCountry">
            <!-- <span class="required" style="color:red">*</span>  -->
            <label for="name">房间号</label>
            <input
              class="form-border"
              id="currentCounty"
              maxlength="10"
              type="text"
              name="currentCounty"
              placeholder="房间号"
              v-model="roomNumber"
            />
            <br />
          </div>
        </div>
        <div class="idNumber" v-if="fromConfigParam[1].whetherShow">
          <span class="required" style="color:red">*</span> 
          <label for="name">身份证号</label><br />

          <input
            class="form-border"
            id="idNumber"
            type="text"
            name="idNumber"
            maxlength="18"
            placeholder="请填写身份证号"
            v-model="idNumber"
          />
          <br />
        </div>
        <div class="sex" v-if="fromConfigParam[2].whetherShow">
          <!-- <span class="required" style="color:red">*</span> -->
          <!--<label for="gender" required>性别</label><br/>
                 <div class="form-border form-twoBor">
                    <div style="border: 1px solid #c6c8c9; border-radius:3px; width: 100%; height: 100%;">
                      <el-radio-group style='width: 100%; padding-left: -10px;' v-model="genderModel" @change="genderChange">
                        <el-radio :label="0">男</el-radio><br/>
                        <div style='border-bottom: 1px solid #c6c8c9; width: 100%;'></div>
                        <el-radio :label="1">女</el-radio>
                      </el-radio-group>
                    </div>
                 </div> -->
          <label for="gender" required>性别</label><br />
          <div
            class="form-border form-twoBor"
            style="border: 1px solid #c6c8c9;"
          >
            <div>
              <el-radio v-model="genderModel" label="0">男</el-radio>
            </div>
            <div style="border-top: 1px solid #e5e5e5;">
              <el-radio v-model="genderModel" label="1">女</el-radio>
              <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
            </div>
          </div>
        </div>
        <div class="age" v-if="fromConfigParam[3].whetherShow">
          <!-- <span class="required" style="color:red">*</span>  -->
          <label for="age">年龄</label><br />
          <input
            class="form-border"
            id="age"
            maxlength="3"
            type="text"
            name="age"
            placeholder="年龄"
            required="required"
            v-model="ageModel"
          />
          <br />
        </div>
        <!-- <div id="guardian" style="display:none;">
                   <div class="guardianNam" v-if="fromConfigParam[4].whetherShow">
                     <span class="required" style="color:red">*</span>
                        <label for="name">监护人姓名</label><br/>

                        <input class="form-border" id="guardianName" type="text" name="guardianName"  placeholder="请填写监护人姓名"  v-model="guardianName"  /> <br/>
                    </div>
                    <div class="guardianName" v-if="fromConfigParam[5].whetherShow">
                            <span class="required" style="color:red">*</span>
                            <label for="name">监护人身份证号</label><br/>

                            <input class="form-border" id="guardianIdNumber" type="text" name="guardianIdNumber"  placeholder="请填写监护人身份证号"  v-model="guardianIdNumber"  /> <br/>
                    </div>
                </div> -->
        <!-- <div class="gender-women" v-if="fromConfigParam[6].whetherShow">

                    <label for="gender" required>特殊人员（孕妇）</label><br/>
                    <div class="form-border form-twoBor" v-if="genderModel == 1" >
                        <div style="border: 1px solid #c6c8c9; border-bottom: none; border-radius: 10px;">
                          <el-radio v-model="pregnant" label="0">否</el-radio>

                        </div>
                        <div style="border: 1px solid #c6c8c9; border-radius: 10px; border-top-color:#e5e5e5;">
                          <el-radio v-model="pregnant" label="1">是</el-radio>

                        </div>
                    </div>
                    <div class="form-border form-twoBor" v-else>
                        <div style="border: 1px solid #c6c8c9; border-bottom: none; border-radius: 3px;">
                          <el-radio disabled v-model="pregnant" label="0">否</el-radio>

                        </div>
                        <div style="border: 1px solid #c6c8c9; border-radius: 3px; border-top-color:#e5e5e5;">
                           <el-radio disabled v-model="pregnant" label="1">是</el-radio>
                        </div>
                    </div>
                </div> -->
        <div class="widows">
          <!-- 是否孤寡老人 -->
          <label for="widows" required>特殊群体</label><br />
          <div
            class="form-border form-twoBor"
            style="border: 1px solid #c6c8c9;"
          >
            <div>
              <el-radio v-model="widows" label="0">否</el-radio>
            </div>
            <div style="border-top: 1px solid #e5e5e5;">
              <el-radio v-if="genderModel == 1" v-model="widows" label="1"
                >孕妇</el-radio
              >
              <el-radio v-else v-model="widows" disabled label="1"
                >孕妇</el-radio
              >
            </div>
            <div style="border-top: 1px solid #e5e5e5;">
              <el-radio v-model="widows" label="2">孤寡老人</el-radio>
            </div>
            <div style="border-top: 1px solid #e5e5e5;">
              <el-radio v-model="widows" label="3">其他</el-radio>
            </div>
          </div>
          <input
            v-if="widows == 3"
            style="top: -20px;"
            class="form-border"
            id="age"
            type="text"
            name="age"
            placeholder="请填写所属群体"
            required="required"
            v-model="groupModel"
          />
          <br />
        </div>
        <!-- <div class="yy-city-distance">
                    <div class="yy-c currentProvince" v-if="fromConfigParam[8].whetherShow">
                      <span class="required" style="color:red">*</span>
                      <label for="name">省</label>
                      <input class="form-border" id="currentProvince" readonly  @click="showSelectPopup=true"  type="text" name="currentProvince"   placeholder="所在省"  v-model="currentProvince"  /> <br/>
                    </div>
                    <div class="yy-c currentCity" v-if="fromConfigParam[9].whetherShow">
                      <span class="required" style="color:red">*</span>
                      <label for="name">市</label>
                      <input class="form-border" id="currentCity" readonly @click="showSelectPopup=true"  type="text" name="currentCity"  placeholder="所在市"  v-model="currentCity"  /> <br/>
                    </div>
                    <div class="yy-ccurrentCounty" v-if="fromConfigParam[10].whetherShow">
                      <span class="required" style="color:red">*</span>
                      <label for="name">区/县</label>
                      <input class="form-border" id="currentCounty" readonly  @click="showSelectPopup=true" type="text" name="currentCounty"  placeholder="所在区/县"  v-model="currentCounty"  /> <br/>
                    </div>
                </div> -->
        <!--
                <div class="currentCountry"  v-if="fromConfigParam[11].whetherShow">
                    <span class="required" style="color:red">*</span>
                    <label for="name">街道/乡/镇</label><br/>

                    <input class="form-border" id="currentCountry" type="text" name="currentCountry"  placeholder="请填所在街道/乡/镇"  v-model="currentCountry"  /> <br/>
                </div> -->

        <!-- <div class="currentLocation" v-if="fromConfigParam[7].whetherShow">
                    <span class="required" style="color:red">*</span>
                    <label for="name">详细地址</label><br/>
                    <input class="form-border" id="currentLocation" type="text" name="currentLocation"  placeholder="请填写详细地址" v-model="currentLocation"  /> <br/>
                </div> -->
        <!-- 是否被确诊 -->
        <label for="gender" required>是否近期返汉人员</label><br />
        <div class="form-border form-twoBor" style="border: 1px solid #c6c8c9;">
          <div>
            <el-radio v-model="backToWuHan" label="0">否</el-radio>
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="backToWuHan" label="1">是</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
        </div>
        <div class="query-time" v-if="backToWuHan == 1">
          <label for="name">选择日期</label><br />
          <div
            style="margin-top:5px; width:100%; height: 32px; line-height:32px; border: 1px solid #cccccc; text-align: center; "
            @click="showTimePlugin"
          >
            <span class="select_show">{{ queryTime }}</span>
          </div>
          <br />
        </div>
        <label for="gender" required>是否发热（体温>37.3℃）</label><br />
        <div class="form-border form-twoBor" style="border: 1px solid #c6c8c9;">
          <div>
            <el-radio checked v-model="fever" label="0">否</el-radio>
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="fever" label="1">是</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
        </div>
        <div id="temperatureId" style="display:none;">
          <label for="gender" required>体温</label><br />
          <input
            class="form-border"
            id="temperature"
            type="text"
            maxlength="4"
            placeholder="请填写体温, 如: 37.0 "
            v-model="temperatureModel"
          />
          <br />
        </div>
        <label for="gender" required>是否有新型肺炎接触史</label><br />
        <div class="form-border form-twoBor" style="border: 1px solid #c6c8c9;">
          <div>
            <el-radio v-model="touchPersonIsolation" label="0">否</el-radio>
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="touchPersonIsolation" label="1">是</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
        </div>
        <div id="touchDistory" style="display:none;">
          <div class="touchPersonName" v-if="fromConfigParam[26].whetherShow">
            <!-- <input class="form-border" id="touchPersonIsolation" type="text" name="touchPersonIsolation"  placeholder="选填"  v-model="touchPersonIsolation"  /> <br/> -->
            <!-- <span class="required" style="color:red">*</span>  -->
            <label for="name">接触人姓名</label><br />

            <input
              class="form-border"
              id="touchPersonName"
              type="text"
              name="touchPersonName"
              placeholder="请填写接触人姓名"
              v-model="touchPersonName"
            />
            <br />
          </div>
          <div class="touchPersonPhone" v-if="fromConfigParam[27].whetherShow">
            <!-- <span class="required" style="color:red">*</span>  -->
            <label for="name">接触人电话</label><br />

            <input
              class="form-border"
              id="touchPersonPhone"
              type="text"
              name="touchPersonPhone"
              placeholder="请填写接触人电话"
              v-model="touchPersonPhone"
            />
            <br />
          </div>
          <!-- <span class="required" style="color:red">*</span>  -->
          <div
            class="touchPersonLocation"
            v-if="fromConfigParam[28].whetherShow"
          >
            <!-- <span class="required" style="color:red">*</span>  -->
            <label for="contact">接触人的住址</label><br />
            <input
              class="form-border"
              id="touchPersonLocation"
              type="text"
              name="touchPersonLocation"
              placeholder="请填写接触人的住址"
              v-model="touchPersonLocation"
            />
            <br />
          </div>
        </div>
        <!-- <label for="gender" required>是否被确诊</label><br/>
               <div class="form-border form-twoBor">
                    <div style="border: 1px solid #c6c8c9; border-bottom: none; border-raduis: 3px;" >
                        <el-radio v-model="diagnosis" label="0">否</el-radio>
                    </div>
                    <div style="border: 1px solid #c6c8c9; border-bottom: none;" >
                        <el-radio v-model="diagnosis" label="1">疑似</el-radio>
                    </div>
                    <div style="border: 1px solid #c6c8c9; border-top-color:#e5e5e5; border-raduis: 3px;" >
                        <el-radio v-model="diagnosis" label="2">确诊</el-radio>
                    </div>
              </div> -->
        <!-- <div id="isdiagnosis" style="display:none">
                  <label for="gender" required>被确诊的统计受救援情况</label><br/>
                <div class="form-border form-twoBor">
                      <div style="border: 1px solid #c6c8c9; border-bottom: none; border-raduis: 3px;" >
                          <el-radio v-model="medicalConditionDiagnosed" label="1">医院救治</el-radio>
                      </div>
                      <div style="border: 1px solid #c6c8c9; border-top-color:#e5e5e5; border-raduis: 3px;" >
                        <el-radio v-model="medicalConditionDiagnosed" label="0">在家隔离等待安排</el-radio>
                      </div>
                </div>
              </div> -->
        <!-- <input style="display:none;" class="form-border" id="isdiagnosis" type="text" name="phoneNum"  placeholder="请填写救治情况" v-model="isdiagnosis" /><br/>  -->
        <!-- 是否被确诊 -->
        <label for="gender" required>其他症状</label><br />
        <div
          class="form-border tizheng clearfix"
          style="border: 1px solid #c6c8c9;"
        >
          <!--<div>
                         <el-checkbox  v-model="symptoModel" label="无"></el-checkbox>
                    </div>-->
          <div>
            <el-checkbox v-model="symptoModel" label="乏力"></el-checkbox>
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="干咳"></el-checkbox>
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="肌肉酸痛"></el-checkbox>
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="寒战"></el-checkbox>
          </div>
          <div>
            <!-- <input type="checkbox" name="symptom" value="6" v-model="symptoModel"/> 呼吸困难 -->
            <el-checkbox v-model="symptoModel" label="呼吸困难"></el-checkbox>
          </div>
          <div>
            <!-- <input type="checkbox" name="symptom" value="7" v-model="symptoModel"/> 咽痛 -->
            <el-checkbox v-model="symptoModel" label="咽痛"></el-checkbox>
          </div>
          <div>
            <!-- <input type="checkbox" name="symptom" value="8" v-model="symptoModel"/> 头疼 -->
            <el-checkbox v-model="symptoModel" label="头疼"></el-checkbox>
          </div>
          <div>
            <!-- <input type="checkbox" name="symptom" value="9" v-model="symptoModel"/>眩晕 -->
            <el-checkbox v-model="symptoModel" label="眩晕"></el-checkbox>
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="腹痛"></el-checkbox>
            <!-- <input type="checkbox" name="symptom" value="10" v-model="symptoModel"/> 腹痛 -->
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="腹泻"></el-checkbox>
            <!-- <input type="checkbox" name="symptom" value="11" v-model="symptoModel"/> 腹泻 -->
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="恶心"></el-checkbox>
            <!-- <input type="checkbox" name="symptom" value="12" v-model="symptoModel"/> 恶心 -->
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="呕吐"></el-checkbox>
            <!-- <input type="checkbox" name="symptom" value="13" v-model="symptoModel"/> 呕吐 -->
          </div>
          <div>
            <el-checkbox v-model="symptoModel" label="鼻塞"></el-checkbox>
            <!-- <input type="checkbox" name="symptom" value="14" v-model="symptoModel"/> 鼻塞 -->
          </div>
        </div>

        <!-- <div id="issympto" style="display:none;">
                  <label for="gender" required>有症状的统计医疗情况</label><br/>
                  <div class="form-border form-twoBor">
                        <div style="border: 1px solid #c6c8c9; border-bottom: none; border-raduis: 3px;" >
                            <el-radio v-model="medicalConditionSymptom" label="2">住院观察</el-radio>
                              <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label>
                        </div>
                        <div style="border: 1px solid #c6c8c9; border-bottom: none;" >
                            <el-radio v-model="medicalConditionSymptom" label="1">检查后在家等待结果</el-radio>
                              <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label>
                        </div>
                        <div style="border: 1px solid #c6c8c9; border-top-color:#e5e5e5; border-raduis: 3px;" >
                          <el-radio v-model="medicalConditionSymptom" label="0">未就医在家</el-radio>
                              <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label>
                        </div>
                  </div>
                </div> -->
        <label for="gender" required>分类诊疗医疗意见</label><br />
        <div class="form-border form-twoBor" style="border: 1px solid #c6c8c9;">
          <div style=" border-bottom: none; ">
            <el-radio v-model="medicalAdvice" label="4">密切接触者</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="medicalAdvice" label="3">一般发热患者</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="medicalAdvice" label="2"
              >CT诊断肺炎患者</el-radio
            >
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="medicalAdvice" label="1">疑似患者</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
          <div style="border-top: 1px solid #e5e5e5;">
            <el-radio v-model="medicalAdvice" label="0">确诊患者</el-radio>
            <!-- <input  type="radio" name="widows" value="1"   id="widowsmale" checked="checked" v-model="widows" /><label for="widowsa"> 是</label> -->
          </div>
        </div>
        <!-- <div class="report-msg">
                 <input style="display:none;" id="issympto"  class="form-border" type="text" name="issympto"  placeholder="请填写医疗情况" v-model="issympto" /><br/>
                  <label for="diagnosis" required>上报类型</label><br/>
                  <div class="form-border form-twoBor">
                        <div style="border: 1px solid #c6c8c9; border-bottom: none; border-top-right-radius:3px; border-top-left-radius:3px;">
                            <el-radio v-model="reportType" label="0">采集人上报</el-radio>
                        </div>
                        <div style="border: 0.5px solid #c6c8c9;border-bottom-right-radius:3px; border-bottom-left-radius:3px; border-top-color:#e5e5e5;">
                          <el-radio v-model="reportType" label="1">公众上报</el-radio>
                        </div>
                  </div>
                <span class="required" style="color:red">*</span>
                <label for="name">采集负责人电话</label><br/>

                <input class="form-border" id="reportPhone" type="text" name="reportPhone"  placeholder="请填写采集负责人电话"  v-model="reportPhone"  /> <br/>
                  <span class="required" style="color:red">*</span>
                <label for="name">采集负责人姓名</label><br/>

                <input class="form-border" id="reportName" type="text" name="reportName"  placeholder="请填写采集负责人姓名"  v-model="reportName"  /> <br/>
                  <span class="required" style="color:red">*</span>
                <label for="name">采集负责人身份证号</label><br/>

                <input class="form-border" id="reportNumber" type="text" name="reportNumber"  placeholder="请填写采集负责人身份证号"  v-model="reportNumber"  /> <br/>
               </div> -->
        <label>补充说明</label><br />
        <div class="form-border form-twoBor" style="border: 1px solid #c6c8c9;">
          <div
            class="textAreaBox"
            style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);"
          >
            <textarea
              name="clueCon"
              id=""
              maxlength="255"
              @input="descInput"
              v-model="clue_describe"
              placeholder=""
            ></textarea>
            <span>{{ remnant }}/255</span>
          </div>
        </div>
      </div>
      <!--<button class="form-submit" type="submit" @click="submitClick">提交</button>-->
    </div>
    <datetime
      style="display:none;"
      v-model="queryTime"
      @on-change="changeTime"
      :show.sync="timeShow"
    ></datetime>
    <confirm
      v-model="showconfirm"
      :title="confirmtitle"
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
      @on-show="onShow"
      @on-hide="onHide"
    >
    </confirm>
    <popup
      v-model="showSelectPopup"
      @on-hide="popupChange('hide')"
      @on-show="popupChange('show')"
      height="50%"
    >
      <menuLinkage
        :queryObj="casList"
        @setCityObj="setCityObj"
        ref="menuLinkage"
      />
    </popup>
    <!-- <popup-picker :showCell="false" title="测试" :show.sync="showPopupPicker" :data="casList" :columns="3" v-model="casModel" ></popup-picker> -->
  </div>
</template>
<script>
import { newquestionnaireData, queryCityData } from "@/assets/js/service";
import fromConfig from "../../../static/formConfig";
import { Confirm, Datetime, PopupPicker, Popup } from "vux";
import menuLinkage from "../commons/menuLinkage.vue";

export default {
  components: {
    Confirm,
    Datetime,
    PopupPicker,
    Popup,
    menuLinkage
  },
  data() {
    return {
      radio: 3,
      casList: [],
      casModel: [],
      openSimple: false,
      levelnum: 0,
      showPopupPicker: true,
      fromConfigParam: fromConfig,
      nameModel: "",
      genderModel: "0",
      ageModel: "",
      phoneModel: "",
      showSelectPopup: false,
      symptoModel: [],
      temperatureModel: "",
      feverModel: "1",
      contactModel: "1",
      showconfirm: false,
      confirmtitle: "是否继续填写",
      groupModel: "",
      // 新增
      timeShow: false,
      isFlag: true,
      // 新增
      idNumber: "",
      guardianName: "", //监护人
      guardianIdNumber: "", //监护人ID
      pregnant: "0", //0 否，1 是否为妇女
      residence: "", //常住地
      currentProvince: "", //当前所在省
      currentCity: "", //当前所在市
      currentCounty: "", //当前所在区/县
      currentCountry: "", //街道/乡/镇（当前所在地）
      currentVillage: "", //社区/村（当前所在地）
      currentLocation: "", //当前所在地（详细住址)
      isChecked: false,
      //
      widows: "0", //0 否，1 是否为老人
      residence: "", //常住地
      healthCondition: "", //目前健康状况（0:正常，1:有症状）
      symptom: "", //'症状（0:无，1:干咳，2:咽痛，3:发热，4:寒战，5:鼻塞）',
      goToDoctor: "", //近期是否医院就诊(0:否，1:是)
      medicalHospital: "", //就诊医院
      medicalResult: "", //诊断结果
      medicalHistory: "", //既往病史
      reportNumber: "", //采集负责人电话
      reportName: "",
      reportPhone: "",
      reportType: "",
      diagnosis: "0", //是否确诊 0 否 1 疑似 2 确诊
      isdiagnosis: "", //救治情况
      issympto: "",
      medicalConditionSymptom: "",
      medicalConditionDiagnosed: "",
      //
      fever: "0",
      backToWuHan: "0",
      queryTime: "填写日期",
      touchPersonIsolation: "0",
      touchPersonLocation: "",
      touchPersonPhone: "",
      touchPersonName: "",
      medicalAdvice: "",
      community: "", //小区
      building: "", //楼栋
      unit: "", // 单元
      roomNumber: "", //房间号
      clue_describe: "",
      remnant: 255
    };
  },
  created() {
    this.initcascade();
  },
  mounted: function() {
    let epidemicData = JSON.parse(localStorage.getItem("epidemicData"));
    if (epidemicData) {
      let reresidenceArr = epidemicData.residence.split("/");
      if (reresidenceArr[3] && reresidenceArr[4]) {
        this.currentProvince = reresidenceArr[0];
        this.currentCity = reresidenceArr[1];
        this.currentCounty = reresidenceArr[2];
        this.currentCountry = reresidenceArr[3];
        this.currentVillage = reresidenceArr[4];
      } else {
        this.currentProvince = reresidenceArr[0];
        this.currentCity = reresidenceArr[1];
        this.currentCounty = reresidenceArr[2];
      }

      this.nameModel = epidemicData.name;
      this.ageModel = epidemicData.age;
      this.genderModel = epidemicData.sex;
      this.phoneModel = epidemicData.phone;
      this.idNumber = epidemicData.idNumber;
      this.pregnant = epidemicData.pregnant; //0 否，1 是否为妇女
      //  this.residence = epidemicData.residence//常住地
      this.community = epidemicData.community;
      this.building = epidemicData.building;
      this.unit = epidemicData.unit;
      this.backToWuhan = epidemicData.backToWuhan;
      this.roomNumber = epidemicData.roomNumber;
      this.widows = epidemicData.widows; //0 否，1 是否为老人
      this.symptoModel = epidemicData.symptom.split(","); //'症状（0:无，1:干咳，2:咽痛，3:发热，4:寒战，5:鼻塞）',
      this.diagnosis = epidemicData.diagnosis; //是否确诊 0 否 1 疑似 2 确诊
      this.fever = epidemicData.fever;
      this.queryTime = epidemicData.backDate;
      this.temperatureModel = epidemicData.temperature;
      this.touchPersonIsolation = epidemicData.touchPersonIsolation;
      this.touchPersonLocation = epidemicData.touchPersonLocation;
      this.touchPersonPhone = epidemicData.touchPersonPhone;
      this.touchPersonName = epidemicData.touchPersonName;
      this.medicalAdvice = epidemicData.medicalAdvice;
    }
  },
  watch: {
    nameModel() {
      //     let nameReg = /^ [\u4e00 - \u9fa5] | [a-zA-Z]$/  ;
      //     console.log(nameReg.test(this.nameModel)) ;
      // 　　if(!nameReg.test(this.nameModel)){
      // 　　　　window.vm.$vux.toast.text('姓名填写有误', 'center')
      // 　　　　return false;
      //     }
      if (this.nameModel != "") {
        var regu = "^[a-zA-Z\u4e00-\u9fa5]+$";
        var re = new RegExp(regu);
        if (this.nameModel.search(re) != -1) {
          return true;
        } else {
          window.vm.$vux.toast.text("姓名填写有误", "center");
          return false;
        }
      }
    },
    ageModel() {
      if (this.ageModel != "") {
        let ageReg = /^\d*$/;
        if (!ageReg.test(this.ageModel)) {
          console.log("年龄不对");
          this.ageModel = "";
          window.vm.$vux.toast.text("年龄只能输入数字", "center");
          return false;
        }
        if (this.ageModel >= 0 && this.ageModel <= 120) {
          console.log(this.ageModel);
        } else {
          this.ageModel = "";
          window.vm.$vux.toast.text("年龄在0-120之间", "center");
          return false;
        }
      }
    },
    idNumber() {
      let pattern = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
      let date = new Date();
      if (this.idNumber.length > 17) {
        if (!pattern.test(this.idNumber)) {
          window.vm.$vux.toast.text("身份证号填写有误", "center");
        } else {
          var num = this.idNumber.charAt(16);
          console.log("fff=>" + num);
          let ageMuis = date.getFullYear() - this.idNumber.substring(6, 10);
          if (ageMuis > 0) {
            this.ageModel = ageMuis;
          } else {
            window.vm.$vux.toast.text("身份证号填写有误", "center");
          }
          if (num % 2 == 0) {
            // console.log('女');
            this.sex = 1;
            this.isChecked = true;
          } else {
            this.sex = 0;
            this.isChecked = true;
          }
        }

        // var num = this.idNumber.charAt(16);
        // // let num = this.idNumber.substring(16,18);
        // console.log(num);
        // if(num%2==0){
        //   // console.log('女');
        //   this.genderModel = 1
        //   this.isChecked = true;
        // }else{
        //   this.genderModel = 0
        //   this.isChecked = true;
        // }
      }
      //   let  chinaz = [\u4e00 - \u9fa5];
      //  if(chianz.test(this.idNumber)){
      //     window.vm.$vux.toast.text('身份证号不允许有汉字', 'center')
      //  }
    },
    temperatureModel() {
      //    let  chinaz = [\u4e00 - \u9fa5];
      //  if(chianz.test(this.temperatureModel)){
      //     window.vm.$vux.toast.text('体温不允许有汉字', 'center')
      //  }
    },
    fever() {
      let temperatureId = document.getElementById("temperatureId");
      if (this.fever == 1) {
        temperatureId.style.display = "block";
      } else {
        temperatureId.style.display = "none";
      }
    },
    touchPersonIsolation() {
      let touchDistory = document.getElementById("touchDistory");
      if (this.touchPersonIsolation == 1) {
        touchDistory.style.display = "block";
      } else {
        touchDistory.style.display = "none";
      }
    },
    diagnosis() {
      let isdiagnosis = document.getElementById("isdiagnosis");
      if (this.diagnosis != 0) {
        isdiagnosis.style.display = "block";
      } else {
        isdiagnosis.style.display = "none";
      }
    },
    currentCounty() {
      this.residence =
        this.currentProvince +
        "/" +
        this.currentCity +
        "/" +
        this.currentCounty +
        "/" +
        this.currentCountry;
    },
    // currentCountry(){
    //   console.log(1212)
    //   // console.log(this.currentCountry);
    //   // if(this.currentCountry == ''){
    //   //   this.residence = this.currentProvince +'/'+ this.currentCity +'/' + this.currentCounty ;
    //   // } else {
    //   //   this.residence = this.currentProvince +'/'+ this.currentCity +'/'+ this.currentCounty +'/'+ this.currentCountry +'/'+ this.currentVillage;
    //   // }

    //   // console.log('irem=>',this.residence )
    // // },
    // },
    currentVillage() {
      this.residence =
        this.currentProvince +
        "/" +
        this.currentCity +
        "/" +
        this.currentCounty +
        "/" +
        this.currentCountry +
        "/" +
        this.currentVillage;
    },
    residence() {
      console.log(this.currentProvince);
      console.log(this.currentProvince.substr(0, 2));
      if (
        this.currentProvince.substr(0, 2) == "香港" ||
        this.currentProvince.substr(0, 2) == "澳门"
      ) {
        this.residence = this.currentProvince;
        this.currentCity = "";
        this.currentCounty = "";
        this.currentCountry = "";
        this.currentVillage = "";
      } else if (this.currentCountry == "") {
        //  console.log(1)
        this.residence =
          this.currentProvince +
          "/" +
          this.currentCity +
          "/" +
          this.currentCounty;
      } else {
        // console.log(2)
        this.residence =
          this.currentProvince +
          "/" +
          this.currentCity +
          "/" +
          this.currentCounty +
          "/" +
          this.currentCountry +
          "/" +
          this.currentVillage;
      }
    },
    symptoModel() {
      // let issympto = document.getElementById('issympto');
      // if(this.symptoModel.length >0){
      //   this.symptoModel.forEach( item => {
      //     if(item == 0) {
      //       issympto.style.display = 'none';
      //     } else {
      //       issympto.style.display = 'block';
      //     }
      //   });
      // } else {
      //    issympto.style.display = 'none';
      // }
      console.log(this.symptoModel);
    },
    phoneModel() {
      if (this.phoneModel.length >= 11) {
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneModel)) {
          if (!/^([0-9]{3,4}-)?[0-9]{7,8}$/.test(this.phoneModel)) {
            window.vm.$vux.toast.text("电话填写有误", "center");
            return;
          }
        }
      }
    },
    // ageModel(){
    //     let guardian = document.getElementById('guardian');
    //     console.log(this.ageModel);
    //     if(this.ageModel < 18){
    //         console.log(1)
    //         guardian.style.display = 'block';
    //     } else {
    //        console.log(1)
    //         guardian.style.display = 'none';
    //     }
    // },
    fromConfigParam() {
      // console.log(12);
      // console.log(this.fromConfigParam);
    },
    personModel() {
      console.log(this.personModel);
      let personMsg = document.getElementById("personMsg");
      if (this.personModel != 4) {
        personMsg.style.display = "block";
      } else {
        personMsg.style.display = "none";
      }
    },
    familyModel() {
      console.log(this.familyModel);
      let personMsg = document.getElementById("familyMsgs");
      if (this.familyModel != 4) {
        personMsg.style.display = "block";
      } else {
        personMsg.style.display = "none";
      }
    }
  },
  methods: {
    setCityObj(_list) {
      if (typeof _list[0] != "undefined") {
        this.currentProvince = _list[0].name;
      }
      if (typeof _list[1] != "undefined") {
        this.currentCity = _list[1].name;
      }
      if (typeof _list[2] != "undefined") {
        this.currentCounty = _list[2].name;
      }
      if (typeof _list[3] != "undefined") {
        this.currentCountry = _list[3].name;
      } else {
        this.currentCountry = "";
      }
      if (typeof _list[4] != "undefined") {
        this.currentVillage = _list[4].name;
      } else {
        this.currentVillage = "";
      }
      this.showSelectPopup = false;
    },
    initcascade() {
      let _this = this;
      queryCityData({ parentCode: "000000" }, function(res) {
        // console.log("resaaaaaaaaaaaaaaaaaaaa==>",res)
        _this.casList = [];
        if (typeof res.data != "undefined" && res.data.length > 0) {
          _this.casList = res.data;
          _this.$refs.menuLinkage.initData(_this.casList, 1);
          _this.$refs.menuLinkage.setDefault(["湖北省", "武汉市", "江夏区"]);
        }
      });
    },
    descInput() {
      var txtVal = this.clue_describe.length;
      this.remnant = 255 - txtVal;
    },
    genderChange() {
      console.log("item=>", this.genderModel);
    },
    popupChange(_type) {
      console.log("_type==>" + _type);
    },
    showTimePlugin() {
      this.timeShow = true;
    },
    clearTree() {},
    changeTime() {
      // console.log("change time")
      // const cqueryTime=Date.parse(this.queryTime);
      // const cendTime=Date.parse(this.endTime);
      // if(cqueryTime > cendTime){
      //     this.queryTime = "开始时间";
      //     window.vm.$vux.toast.text('请重新填写开始时间', 'bottom')
      // }
    },
    getCurrentDate() {
      const timeStr = "-";
      const curDate = new Date();
      const curYear = curDate.getFullYear(); //获取完整的年份(4位,1970-????)
      const curMonth = curDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      const curDay = curDate.getDate(); //获取当前日(1-31)
      const curWeekDay = curDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      const curHour = curDate.getHours(); //获取当前小时数(0-23)
      const curMinute = curDate.getMinutes(); // 获取当前分钟数(0-59)
      const curSec = curDate.getSeconds(); //获取当前秒数(0-59)
      const Current = curYear + timeStr + curMonth + timeStr + curDay;
      return Current;
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    onCancel() {
      this.$router.push({ path: "/home", query: {} });
    },
    onConfirm() {
      console.log("确认删除");
    },
    onShow() {
      console.log("显示");
    },
    onHide() {
      console.log("隐藏");
    },
    typeTime(val) {
      const d = new Date(val);
      const resDate =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      return resDate;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    submitClick() {
      let _this = this;
      console.log(this.currentLocation);
      // &&_this.$verification(this.ageModel,0,"年龄")&&_this.$verification(this.phoneModel,0,"电话")&&_this.$verification(this.phoneModel,1,"电话")&&_this.$verification(this.temperatureModel,0,"体温")
      if (
        _this.$verification(
          this.nameModel,
          0,
          "姓名" &&
            _this.$verification(this.phoneModel, 0, "电话") &&
            _this.$verification(this.residence, 0, "所住区域")
        )
      ) {
        var param = {
          name: this.nameModel,
          sex: this.genderModel,
          age: this.ageModel,
          phone: this.phoneModel,
          idNumber: this.idNumber,
          // "guardianName": this.guardianName,//监护人
          // "guardianIdNumber": this.guardianIdNumber,//监护人ID
          // "pregnant": this.pregnant, //0 否，1 是否为妇女
          residence: this.residence, //常住地
          currentProvince: this.currentProvince, //当前所在省
          currentCity: this.currentCity, //当前所在市
          currentCounty: this.currentCounty, //当前所在区/县
          currentCountry: this.currentCountry, //街道/乡/镇（当前所在地）
          currentVillage: this.currentVillage, //社区/村（当前所在地）
          currentLocation: this.currentLocation, //当前所在地（详细住址)
          widows: this.widows, //0 否，1 是否为老人
          residence: this.residence, //常住地
          symptom: this.symptomModel, //'症状（0:无，1:干咳，2:咽痛，3:发热，4:寒战，5:鼻塞）',
          // 'reportNumber':this.reportNumber,//采集负责人电话
          // 'reportName':this.reportName,
          // 'reportPhone': this.reportPhone,
          // 'reportType':this.reportType,
          diagnosis: this.diagnosis, //是否确诊 0 否 1 疑似 2 确诊
          medicalConditionSymptom: this.medicalConditionSymptom,
          medicalConditionDiagnosed: this.medicalConditionDiagnosed,
          //
          fever: this.fever,
          backDate: this.queryTime,
          temperature: this.temperatureModel,
          touchPersonIsolation: this.touchPersonIsolation,
          touchPersonLocation: this.touchPersonLocation,
          touchPersonPhone: this.touchPersonPhone,
          touchPersonName: this.touchPersonName,
          medicalAdvice: this.medicalAdvice,
          community: this.community, //小区
          building: this.building, //楼栋
          unit: this.unit, // 单元
          roomNumber: this.roomNumber, //房间号
          clue_describe: this.clue_describe
        };
        // console.log(param)
        newquestionnaireData(param, function(res) {
          console.log("返回正常questionnaireData", res);
          if (res.success) {
            console.log("ddd" + res);
            _this.$showBottomToast("上报成功");
            //_this.showconfirm=true;
          } else {
            _this.$showBottomToast("请求数据异常！");
          }
        });
      }

      console.log(
        this.nameModel +
          "+" +
          this.genderModel +
          "+" +
          this.ageModel +
          "+" +
          this.phoneModel +
          "+" +
          this.symptoModel +
          "+" +
          this.temperatureModel +
          "+" +
          this.feverModel +
          "+" +
          this.contactModel
      );
    }
  }
};
</script>
<style lang="less">
.el-checkbox__inner {
  border-color: #b3b3b3;
}
.el-radio__inner {
  border-color: #b3b3b3;
}
.main {
  overflow: hidden;
  // background: url("../../assets/images/home/bj.png") 0 0;
  background-size: 100% 100%;
  .form-container {
    background: #f8fafb;
    border-left: 1px solid #e5e5e5;
    border: 1px solid #e5e5e5;
    background-size: 100% 100%;
    width: calc(100% -16px);
    // margin: 0 3%;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 10px;
    padding-bottom: 25px;
    border-radius: 8px;
    .name {
      padding-top: 15px;
    }
    .form-main {
      width: 100%;
      // margin-top: 130px;
      border-radius: 5px;
      margin-bottom: 30px;
      padding: 0 20px;
      color: #333333;
      .warn-content {
        margin-top: 10px;
        margin-bottom: 18px;
        line-height: 30px;
        font-size: 15px;
      }
      h2 {
        text-align: center;
        color: #fff;
        width: calc(100% + 40px);
        margin-left: -20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
        height: 60px;
        line-height: 60px;
        font-size: 24px;
      }
      h4 {
        margin-top: 15px;
      }
      .form-border {
        background-color: rgba(255, 255, 255, 0.9);
        color: #333333;
        padding: 5px;
        margin: 9px 0;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 3px;
      }
      .tizheng {
        div {
          width: 33.3333%;
          float: left;
          padding: 10px 5px;
          font-size: 15px;
          input {
            vertical-align: middle;
            width: 15px;
            height: 15px;
          }
        }
      }
      .form-twoBor {
        padding: 5px 0;
        div {
          width: 100%;
          padding: 5px 10px;
          input {
            vertical-align: middle;
            width: 20px;
            height: 20px;
          }
          label {
            font-size: 15px;
          }
        }
      }
    }
    .form-submit {
      width: 90%;
      margin-left: 5%;
      height: 50px;
      background: #228ed9;
      border-radius: 8px;
      color: white;
      font-size: 15px;
      border: none;
      outline: none;
    }
  }
  label {
    //  margin-bottom: 15px;
  }

  input {
    border: 1px solid #cccccc;
  }
  .el-input__inner {
    color: #fdfdfd;
  }
  .el-radio {
    margin: 5px;
    left: -5px;
    .el-radio__label {
      color: #000;
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: #000 !important;
    }
    // .el-radio__input .is-checked+.el-radio__label {
    //   color: #000 !important;
    // }
  }
  .yy-city-distance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .yy-c {
      flex: 1;
      // margin-right: 10px;
    }
    .currentCity {
      margin-right: 10px;
    }
    .yy-ccurrentCounty {
      margin-right: 10px;
    }
  }
  #residence {
    // font-size: 12px;
    height: 40px;
  }
  p {
    font-size: 15px;
    padding-left: 5px;
  }
  .textAreaBox {
    position: relative;
    height: 8em;
    padding: 0;
    z-index: 2;
    textarea {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 10px;
    }
    span {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
      color: #ccc;
    }
  }

  // .yy-input::-webkit-input-placeholder,
  //   textarea::-webkit-input-placeholder {
  //     /* WebKit browsers */
  //     color: red;
  //   }
}
</style>
